<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Sparklines?</title>
		<style type="text/css" media="screen">
			body {
				font-family: serif;
			}
			
			#content {
				position: absolute;
				left: 50px;
				top: 50px;
				width: 400px;
			}
			
			h1 {
				font-style: italic;
				font-weight: normal;
				border-bottom: dotted red 1px;
			}
			
			ol li {
				margin: 10px;
			}
			
			span.spark {
				display: none;
			}
		</style>
		
		<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	</head>
	<body id="body" onload="">
		<div id="content">
			<h1>Sparklines</h1>
			<p><a href="http://sparklines.org">Sparklines</a> are tiny word-sized graphs that depict series of numerical data <span class="spark">10 20 30 40 500 300 200 600 700 200 900</span> like that.  Neat.</p>
			
			<p>They increase the percieved classy-ness <span class="spark" width="25">0 1 3 5 10</span> of 
			  a site by a tremendous amount.</p>
			
			<p>Adding them to your site is as easy as "1 2 3!"</p>
			
			<h1>How-To</h1>
			
			<ol>
				<li>Download <a href="spark.js">spark.js</a> and include it at the <i>bottom</i> of your page</li>
				<li>Add &lt;span class="sparkline"&gt; tags to your page</li>
				<li>Fill them with numeric data, separated by spaces (literally as easy as "1 2 3")</li>
			</ol>
			
			<h1>Example</h1>
			<p>The code:</p>
			
			<pre>
&lt;span class="sparkline"&gt;1 2 5 9 15 11 10 9 4 3.3&lt;/span&gt;
			</pre>
			
			<p>Will yield the graph: <span class="spark">1 2 5 9 15 11 10 9 4 3.3</span></p>
				
			<h1>Advanced</h1>
			<p>They even work on dark backgrounds by adding styles.</p>
			
			<pre>
&lt;span class=&quot;sparkline&quot; style=&quot;color: #eee;&quot;&gt;1 2 5 9 3.3&lt;/span&gt;
			</pre>
			
			<div style="background: black; padding: 8px; color: #eee;">
				<p>Not bad <span class="spark" style="color: #eee;">1 2 5 9 3.3</span>, not bad at all.</p>
			</div>
			
			<h1>More Info</h1>
			<p>There's one slight problem.  These don't work in IE at the moment.  Microsoft is taking their time
				adopting the HTML canvas tag, while Safari, Firefox, and Opera are ahead of the game.  Don't fret,
				though, because IE introduced the XMLHttpRequest object, and look where that is now!</p>
			<p>Until then, this library is only officially supported in the latest versions of Safari, Firefox
				and Opera.  However, you can add the following CSS code to disable the sparklines for IE, and 
				they will be automatically enabled when the script runs</p>
			<pre>
span.spark {
  display: none;
}
			</pre>
			<p>This software is distributed under the MIT licence.</p>
		</div>
		
  	<script src="spark.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>